<template>
    <div class="nearby">
        <h3 class="nearby__title">附近店铺</h3>
        <router-link v-for="item in nearbyList"  :to="`/shop/${item._id}`" :key="item._id">
           <ShopInfo :item="item" />
        </router-link>
    </div>
</template>

<script>
import { ref } from "vue"
import { HotList } from "@/api/http"
import ShopInfo from '@/components/ShopInfo'
const useNearbyEffect = ()=>{
      const nearbyList = ref([]);
      const getData = async ()=>{
        const res = await HotList();
        nearbyList.value = res
      }
      return { nearbyList, getData }
}

export default {
  name: 'Nearby',
  components:{ ShopInfo },
  setup() {
    const { nearbyList, getData } = useNearbyEffect();
    getData()
    return { nearbyList, getData } 
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.nearby{
  &__title{
     margin: .16rem 0 .04rem 0;
     font-size: .18rem;
     font-weight: normal;
     color: $content-fontcolor;
  }
  a{
    text-decoration: none;
  }

}
</style>
